<template>
  <div
    v-if="headType == 1"
    class="nav-container"
    :class="needSticky ? 'nav-sticky' : ''"
  >
    <div class="nav-left">
      <Logo />
      <NavList :role="role" :navType="config.navType" :navList="navList" />
    </div>
    <div class="nav-right" style="display: flex; flex-direction: row">
      <Search :searchType="config.searchType" />
      <Avatar
        :loginStatus="loginStatus"
        :role="role"
        :userInfo="userInfo"
        :showText="config.showAvatartext"
        :avatarType="config.avatarType"
      />
    </div>
  </div>

  <div
    v-else-if="headType == 2"
    class="nav-container"
    :class="needSticky ? 'nav-sticky' : ''"
  >
    <div class="nav-left">
      <Logo />
      <NavList :role="role" :navType="config.navType" :navList="navList" />
      <Search :searchType="config.searchType" />
    </div>
    <Avatar
      :loginStatus="loginStatus"
      :role="role"
      :userInfo="userInfo"
      :showText="config.showAvatartext"
      :avatarType="config.avatarType"
    />
  </div>

  <div
    v-else-if="headType == 3"
    class="nav-container"
    :class="needSticky ? 'nav-sticky' : ''"
  >
    <div class="nav-left">
      <Logo />
      <NavList :role="role" :navType="config.navType" :navList="navList" />
    </div>
    <Avatar
      :loginStatus="loginStatus"
      :role="role"
      :userInfo="userInfo"
      :showText="config.showAvatartext"
      :avatarType="config.avatarType"
    />
  </div>

  <div
    v-else-if="headType == 4"
    class="nav-container"
    :class="needSticky ? 'nav-sticky' : ''"
  >
    <div class="nav-left">
      <Logo />
    </div>
    <div class="nav-right" style="display: flex; flex-direction: row">
      <NavList :role="role" :navType="config.navType" :navList="navList" />
      <Avatar
        :loginStatus="loginStatus"
        :role="role"
        :userInfo="userInfo"
        :showText="config.showAvatartext"
        :avatarType="config.avatarType"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useStore } from "vuex";
import Logo from "../../components/logo/index.vue";
import NavList from "../../components/nav/index.vue";
import Search from "../../components/search/index.vue";
import Avatar from "../../components/avatar/index.vue";

const store = useStore();

// Props
const props = defineProps({
  headType: {
    type: [Number, String],
    default: 1,
  },
  needSticky: {
    type: Boolean,
    default: true,
  },
  role: {
    type: String,
  },
  userInfo: {
    type: Object,
    default: () => ({}),
  },
  loginStatus: {
    type: Boolean,
    default: false,
  },
  config: {
    type: Object,
    default: () => ({}),
  },
});

// Data
const navList = ref<any[]>(store.state.pagesConfig.navList || []);
</script>

<style scoped>
.nav-sticky {
  z-index: 1200;
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--color-8);
}
.nav-container {
  background-color: var(--color-8);
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: solid 1px var(--color-9);
  box-shadow: 4px 2px 2px var(--color-9);

  .nav-left {
    display: flex;
    flex-direction: row;
  }
}
</style>
